<template>
    <div class="model-detail">
         <div class="model-detail-title">
              <el-row>
                  <el-col :span="3" class="title-name">
                      {{modelName}}
                  </el-col>
                  <el-col :span="6">
                      <el-row class="user-info">
                          <el-col :span="4">
                            <img src="@/assets/model/dingwei.png" alt="">{{userInfo.address}}
                          </el-col>
                          <el-col :span="4">
                              <img src="@/assets/model/yonghuguanli.png" alt="">{{userInfo.user}}
                          </el-col>
                          <el-col :span="8">
                              <img src="@/assets/model/shijian.png" alt="">{{userInfo.time}}
                          </el-col>
                      </el-row>
                  </el-col>
              </el-row>
         </div>
         <div class="model-detail-content">
               <el-tabs v-model="activeName">
                    <el-tab-pane label="模型概要" name="0">
                    </el-tab-pane>
                    <el-tab-pane label="评估报告" name="1">
                    </el-tab-pane>
                </el-tabs>
                <component :is="componentsArray[activeName]"></component>
         </div>
    </div>
</template>
<script>
import ModelProfile from './ModelProfile'
import AppraisalReport from './AppraisalReport'
export default {
    name: 'ModelDetail',
    components: {
        ModelProfile,
        AppraisalReport
    },
    data () {
        return {
            modelName: '逻辑回归模型',
            userInfo: {
                address: '萧山',
                user: 'admin',
                time: '2018-09-12 12:12:34'
            },
            activeName: 0,
            componentsArray: [ModelProfile, AppraisalReport]
        }
    }
}
</script>
<style lang="less">
    .model-detail {
        .model-detail-title {
            padding: 27px 0;
            line-height: 26px;
            .title-name {
                font-size: 20px;
                color: #464D5F;
                font-family: Semibold;
            }
            .user-info {
                font-size: 12px;
                color: #464D5F;
                .el-col {
                    text-align: left;
                    img {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin-right: 5px;
                        vertical-align: middle;
                    }
                }
            }
        }
        .model-detail-content{
            overflow: hidden;
            background: #fff;
            padding: 10px;
            .el-tabs{
                padding: 20px 0;
                .el-tabs__header {
                    width: 250px;
                    .el-tabs__item {
                        font-size: 24px;
                    }
                }
            }
        }
    }
</style>
